<template>
  <div>
    <el-form
      label-width="120px"
      v-for="service in config.services"
      :key="service"
    >
      <el-form-item label="推送地址">
        <el-input
          size="small"
          v-model="service.url"
          auto-complete="off"
          placeholder="http://或https://开头"
        ></el-input>
      </el-form-item>
      <el-form-item label="转换脚本">
        <codemirror
          ref="editScript"
          v-model="service.script"
          :options="cmOption"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";

import "codemirror/lib/codemirror.css";
import "codemirror/theme/monokai.css";
import "codemirror/theme/panda-syntax.css";

require("codemirror/lib/codemirror");
require("codemirror/mode/javascript/javascript");

import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint.js";

import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";
export default {
  name: "HttpAction",
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          type: "http",
          services: [
            {
              script: "",
              url: "",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      qqq: "123",
      cmOption: {
        tabSize: 4,
        lineNumbers: true,
        line: true,
        indentWithTabs: true,
        smartIndent: true,
        mode: "text/javascript",
        theme: "monokai",
        foldGutter: true,
        lineWrapping: true,
        gutters: [
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter",
          "CodeMirror-lint-markers",
        ],
      },
    };
  },
  components: {
    codemirror,
  },
  created() {
    this.init();
  },
  watch: {
    config() {
      this.init();
    },
  },
  methods: {
    init() {
      if (this.config.services.length > 1) {
        this.config.services.splice(1, this.config.services.length - 1);
      }
    },
  },
};
</script>

<style scoped>
.CodeMirror {
  height: 300px !important;
}
</style>
<style>
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  line-height: 21px !important;
}
</style>